<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>网站摘抄轮播代码</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            border: 0px;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }

        #wrapper {
            margin: 50px auto;
        }

        #show-area {
            width: 800px;
            height: 450px;
            position: relative;
            margin: 0px auto;
            overflow: hidden;
        }

        #show-area ul {
            position: relative;
            width: 4800px;
            height: 450px;
        }

        #show-area ul li {
            float: left;
            width: 800px;
        }

        #show-area ul li img {
            width: 800px;
            height: 450px;
        }

        #controler {
            width: 120px;
            text-align: center;
            position: absolute;
            top: 425px;
            left: 370px;
            z-index: 1;
        }

        #controler div {
            height: 15px;
            width: 15px;
            border-radius: 100%;
            background-color: #ccc;
            float: left;
            margin-left: 5%;
            /*透明度50%*/
            opacity: 0.9;
            /*为了适应旧的浏览器*/
            filter: Alpha(opacity=90);
        }

        #button-left {
            color: #fff;
            position: absolute;
            top: 189px;
            left: 0px;
            width: 60px;
            height: 60px;
            z-index: 2;
            background: url(images/left.jpg);
            border-radius: 50%;
            background-size: cover;
            opacity: 0.5;
            /*为了适应旧的浏览器*/
            filter: Alpha(opacity=50);
        }

        #button-right {
            /*display:none;*/
            color: #fff;
            position: absolute;
            top: 189px;
            left: 740px;
            width: 60px;
            height: 60px;
            z-index: 2;
            background: url(images/right.jpg);
            border-radius: 50%;
            background-size: cover;
            opacity: 0.5;
            /*为了适应旧的浏览器*/
            filter: Alpha(opacity=50);
        }

        .onclick {
            background-color: #FFF !important;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="show-area">
            <ul>
                <li><a href="#"><img src="../images/mi-1.jpg"></a></li>
                <li><a href="#"><img src="../images/mi-2.jpg"></a></li>
                <li><a href="#"><img src="../images/mi-3.jpg"></a></li>
                <li><a href="#"><img src="../images/mi-4.jpg"></a></li>
            </ul>
            <div id="button-left" title="下一张"></div>
            <div id="button-right" title="上一张"></div>
            <div id="controler"></div>
            <!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
        </div>
    </div>

    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            var i = 0;
            var imgWidth = $("#show-area ul li").width();
            var clone = $("#show-area ul li").first().clone();
            $("#show-area ul").append(clone);
            //复制第一张图片并且添加到最后达到无缝连接的效果
            var size = $("#show-area ul li").size();//得到所有li的个数

            /*第一步*/
            //一开始循环添加按钮
            for (var j = 0; j < size - 1; j++) {
                $("#controler").append("<div></div>");

            }
            //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
            //所以添加按钮的时候我们也应该添加4个按钮
            $("#controler div").eq(0).addClass("onclick");


            /*第二步*/
            //左按钮
            $("#button-left").click(function () {
                Toleft();

            })
            //右按钮
            $("#button-right").click(function () {
                Toright();

            })


            /*第3步*/
            //按钮移出移入事件
            $("#controler div").hover(function () {
                i = $(this).index();
                clearInterval(timer);
                $("#show-area ul").stop().animate({ left: -i * imgWidth });
                $(this).addClass("onclick").siblings().removeClass("onclick");
                $("#index").html("index的值：" + index);
            }, function () {
                timer = setInterval(function () {
                    Toleft();
                }, 3000)
            })

            //ul鼠标移出移入事件
            $("#show-area ul").hover(function () {
                clearInterval(timer);

            }, function () {
                timer = setInterval(function () {
                    Toleft();

                }, 3000)

            })

            //两个方向按钮鼠标移出移入事件
            $("#button-left,#button-right").mouseover(function () {
                clearInterval(timer);
            }).mouseout(function () {
                timer = setInterval(function () {
                    Toleft();
                }, 3000)
            })

            //定时器
            var timer = setInterval(function () {
                Toleft();

            }, 3000)


            /*第2.1步*/
            //左按钮实现的函数
            function Toleft() {

                i++;
                if (i == size) {
                    //当当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）
                    $("#show-area ul").css({ left: 0 });
                    i = 1;
                }
                $("#show-area ul").stop().animate({ left: -i * imgWidth }, 1000);

                if (i == size - 1) {
                    $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick");

                } else {
                    $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");
                }
            }


            /*第2.2步*/
            //右按钮实现的函数
            function Toright() {

                //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
                i--;
                if (i == -1) {
                    $("#show-area ul").css({ left: -(size - 1) * imgWidth });
                    i = size - 2;
                }
                $("#show-area ul").animate({ left: -i * imgWidth }, 1000);
                $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");

            }

        });

    </script>

</body>

</html>




